<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!--  引入重置样式表     reset.css -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入公共样式表       common.css -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引进首页样式        index.css -->
    <link rel="stylesheet" href="../css/productInfor.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="container clearfix">
            <p>欢迎来到HOUSE家居网</p>
            <div class="right clearfix">
                <script type="text/html" id="userInfor">
                    {{if data == ''}}
                    <a href="login.html" target="_self">登录</a>
                    <a href="login.html">注册</a>
                    <p class="teltext"><img src="../images/tel.png" alt="">400-00-000xxx</p>
                    <p class="mailtext"><img src="../images/mail.png" alt="">1234567xxx@gmail.com</p>
                    {{else}}
                    <a href="../pages/login.html">{{@username}}</a>
                    <p class="teltext"><img src="../images/tel.png" alt="">400-00-000xxx</p>
                    <p class="mailtext"><img src="../images/mail.png" alt="">1234567xxx@gmail.com</p>
                    {{/if}}
                </script>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav">
        <div class="container">
            <a href="index.html" class="logoimg"><img src="../images/logo.png" alt="" class="logo"></a>
            <div class="nav">
                <ul>
                    <li>
                        <a href="index.html">首页</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg">
                    </li>
                    <li><a href="aboutUs.html">关于我们</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="productList.html">产品展示</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="newList.html">新闻动态</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="message.html">在线留言</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li class="last"><a href="contactUs.html">联系我们</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 轮播 -->
    <div class="banner">
        <img src="../images/banner5.jpg" alt="">
    </div>
    <!-- 案件 -->
    <div class="contactaindex">
        <div class="container">
            <a href="./index.html">首页</a> >> <a href="./productList.html">商品展示</a> >> <a
                href="./productInfor.html">商品详情</a>
        </div>
    </div>
    <!-- 产品展示 -->
    <div class="product">
        <div class="container clearfix">
            <div class="titlebox">
                <div class="box1">产品展示</div>
                <div class="nav_bg"><img src="../images/nav_bg02.png" alt=""></div>
            </div>
            <div class="content">
                <div class="leftbox">
                    <div class="top">
                        <ul>
                            <li><a href="#">床上用品</a></li>
                            <li><a href="#">家居饰品</a></li>
                            <li><a href="#">居家日用</a></li>
                            <li><a href="#">家居收纳</a></li>
                            <li><a href="#">厨房收纳</a></li>
                            <li><a href="#">厨房餐饮</a></li>
                        </ul>
                    </div>
                    <div class="bto">
                        <img src="../images/contactus.jpg" alt="">
                    </div>
                </div>
                <div class="right">
                    <script type="text/html" id="productList">
                        <!-- 商品图片 -->
                       <div class="productPic">
                        <div class="item">
                            <img src="{{@picture}}" alt="">
                            <div class="section active"></div>
                        </div>
                        <div class="bigPic active">
                            <img src="{{@picture}}" alt="">
                        </div>
                       </div>
                       <!-- 商品信息 -->
                        <div class="productInfo">
                            <div class="right-title">
                                <p>{{@product}}</p>
                                <div class="box">
                                    <p class="oldPrice">原价: <span>￥{{@oldprice}}</span></p>
                                    <p class="price">现价: ￥<span>{{@price}}</span></p>
                                    <button onclick="saveCart()">加入购物车</button>
                                </div>
                                <div class="address">
                                    <span>配送范围</span>送货范围仅限广元、自贡、阿坝、雅安、南充、巴中、眉山、攀枝花、资阳、遂宁、宜宾、内江、乐山、泸州、广安、甘孜、绵阳、德阳、达州、成都、凉山地区(生鲜类别仅限部分地区)
                                </div>
                            </div>
                        </div>
                        <div class="center">
                            <p>{{@product}}</p>
                            <p class="content">
                                简单大方的英图案来装点玻璃或墙角，别致且端正！产品规格：60*30cm，张数：（30*30 1张 30*60 1张），建议粘贴尺寸：0.58*0.73m 品牌简介
                                100%出口转向国内销售，并希望将高质量产品低价在国内平台上架，并将根据国内市场推出全新设计。请参考网站附件图片
                                北京布朗科技有限公司多年专注于各种墙饰产品的研发，设计与生产，旗下推出AMON艾蒙品牌系列产品----艾蒙印像、艾蒙色彩，艾蒙乐趣。
                                布朗公司旗下品牌的材料由青岛布朗工艺制品公司用1年的时间研发而成，具有以下特点： 1.通过法国 BV 测试 以及 SGS 测试，含铅总量低于 200PPM。
                                【欧洲标准为含铅总量低于
                                1000PPM】 2.背胶具有真正的可移除性能，真正做到不破坏墙面，并可再贴。 布朗公司旗下所有品牌的胶水，均为布朗公司与日本公司共同研发的独家专利产品。
                                【此产品是根据美国墙面的测试结果，对中国乳胶漆墙面进行实验，也完全不破坏墙面。） 3.转移膜转移性能良好，不留任何残胶，随温度变化粘着力性能变化小。
                                4.具有独特的胶面导气槽,在粘贴的时候可轻松排除贴纸与墙面间的气泡，也不会在黏贴到墙面长时间后因为温度变化而产生气泡。
                                5.本产品无气味，完全环保，而且底纸（离型纸）不会因受潮而卷曲。
                                包装清单 产品使用说明,刮卡 使用说明 注意事项： 1. 广告PVC材料是有损健康的！不可作为墙贴室内使用。
                            </p>
                            <p class="last1">上一个： <a href="#">无</a></p>
                            <p class="last2">下一个： <a href="#">全悦18框实木照片墙创意相片墙</a></p>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div id="aside">
        <ul>
            <li>
                <img src="../images/cart.png" alt="">
                <img src="../images/cart_hover.png" alt="" class="active">
                <span>购物车</span>
            </li>
            <li>
                <img src="../images/totop.png" alt="">
                <img src="../images/totop_hover.png" alt="" class="active">
                <span>回到顶部</span>
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div id="footer">
        <div class="container">
            <div class="footerleftbox">
                <img src="../images/logo2.jpg" alt="">
                <div class="footerleft">
                    <img src="../images/icon.jpg" alt="">
                    <p>中国上海市xxx区xxx路12号moumou大厦5层5xx室</p>
                    <p>400-000-xxxx / (021)-1234578xxx</p>
                    <p>12385963xxxx@gmail.com</p>
                </div>
            </div>
            <div class="footercenterbox">
                <div class="footercenter">
                    <p class="title">快速链接</p>
                    <div class="footerbox1">
                        <div class="footerboxleft">
                            <p><a href="#">> 网站首页</a></p>
                            <p><a href="#">> 产品展示</a></p>
                            <p><a href="#">> 在线留言</a></p>
                        </div>
                        <div class="footerboxright">
                            <p><a href="#">> 关于我们</a></p>
                            <p><a href="#">> 新闻动态</a></p>
                            <p><a href="#">> 联系我们</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerrightbox">
                <div class="footercenter">
                    <p class="title">站内搜索</p>
                    <div class="lastbtn">
                        <input type="text" placeholder="请输入关键字">
                        <button>搜索</button>
                    </div>
                    <div class="rightlast">
                        <p>关注我们</p>
                        <a href="#">
                            <img src="../images/fenxiang.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="last">
        <div class="container">
            <p> Copyright 2007-2014 北京千锋互联科技有限公司 京ICP备12003911号-3 京公安备11010802011455 站长统计 百度统计</p>
        </div>
    </div>

    <script src="../static/jquery-3.6.0.js"></script>
    <script src="../static/template-web.js"></script>
    <script src="../js/productInfor.js"></script>
    <script src="../js/common.js"></script>
</body>

</html>